<template>
  <div class="enterprise-count">
    <div class="summary">企业共计 <span class="num">48</span> 家</div>
    <div class="chart">
      <chart-view :options="options" height="100%" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ChartView from "@/components/chart-view/Index.vue";
import { createPieOptions, createEChartOptions } from "@/plugins/charts/echart";
import { ECOption } from "@/plugins/charts/types";
import { ref } from "vue";

const options = ref<ECOption>(
  createPieOptions(
    {
      legend: {
        orient: "vertical",
        right: "right",
        top: "center",
        textStyle: {
          color: "inherit",
        },
      },

      series: [
        {
          name: "企业",
          type: "pie",
          radius: "70%",
          center: ["30%", "50%"],
          data: [
            { value: 1048, name: "企业类型1" },
            { value: 735, name: "企业类型2" },
            { value: 580, name: "企业类型3" },
            { value: 484, name: "企业类型4" },
            { value: 300, name: "企业类型5" },
          ],
          label: {
            color: "inherit",
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    },
    true
  )
);
</script>

<style lang="less" scoped>
.enterprise-count {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .summary {
    color: #ccc;
    font-size: 16px;

    .num {
      color: #00f7ff;
      font-size: 32px;
      margin: 0 10px;
    }
  }

  .chart {
    flex: 1;
    overflow: hidden;
  }
}
</style>
